import { forwardRef, useImperativeHandle } from 'react'
import type { FC, PropsWithChildren } from 'react'

interface IProps {
  count: number
  changeCount: (n: number) => void
}

// const Child: FC<PropsWithChildren<IProps>> = (
// const Child = ({ count, changeCount, children }, _ref) => {
//   return (
//     <div>
//       <h5>child组件 -- {count}</h5>
//       {children}
//       <hr />
//       <button
//         onClick={() => {
//           changeCount(10)
//         }}
//       >
//         ++++++
//       </button>
//     </div>
//   )
// }

// 针对于函数组件使用ref属性来定义类型
const Child = forwardRef<ITest.IUser, PropsWithChildren<IProps>>(
  ({ count, changeCount, children }, _ref) => {
    useImperativeHandle(_ref, () => ({
      name: '张三',
      id: 20
    }))

    return (
      <div>
        <h5>child组件 -- {count}</h5>
        {children}
        <hr />
        <button
          onClick={() => {
            changeCount(10)
          }}
        >
          ++++++
        </button>
      </div>
    )
  }
)

export default Child
